<template>
	<div>
		<div class="row">
			<div class="col-xs-offset-2 col-xs-8">
				<div class="page-header">
					<h2>Vue Router Demo</h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-2 col-xs-offset-2">
				<div class="list-group">
					<!-- 
						路由跳转

						router-link 
							to 跳转路由路径

						当router-link的to和路由路径相等时，会自动添加两个类名：router-link-active router-link-exact-active 
					-->
					<router-link class="list-group-item" to="/about">About</router-link>
					<router-link class="list-group-item" to="/home">Home</router-link>
				</div>
			</div>
			<div class="col-xs-6">
				<div class="panel">
					<div class="panel-body">
						<div>
							<!-- 
								显示路由组件 
									只能显示一级路由组件，要想显示二级路由组件，
									需要在一级路由组件写router-view才能显示二级路由组件
							-->
							<!-- 根据路由路径的变化，通过路由配置找到对应的组件，自动加载显示 -->
							<router-view />
							<!-- <div>
								
								<div>
									<div>
										<ul>
											<li>
												<a href="/home/message/1">message001</a> &nbsp;&nbsp;
												<button>push</button> &nbsp;
												<button>replace</button>
											</li>
											<li>
												<a href="/home/message/2">message002</a>
												&nbsp;&nbsp;<button>push</button> &nbsp;<button>
													replace
												</button>
											</li>
											<li>
												<a href="/home/message/4">message004</a>
												&nbsp;&nbsp;<button>push</button> &nbsp;<button>
													replace
												</button>
											</li>
										</ul>
										<button>前进</button>
										<button>后退</button>
									</div>
								</div>
							</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "App",
};
</script>

<style>
.router-link-active {
	background-color: yellowgreen !important;
	color: #fff !important;
}
</style>
